<template>
    <div>
        <button @click="add()">添加用户</button>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
            >
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="success" size="small" @click="upd(scope.row)"  >修改</el-button>
                    <el-button type="danger" @click="del(scope.row)"   size="small">删除</el-button>

                </template>
            </el-table-column>

        </el-table>

        <!--分页属性-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15,20]"
                :page-size="pageSize"
                layout="total,sizes, prev, pager, next,jumper"
                :total="total">
        </el-pagination>

        <!--添加用户弹出框-->
        <el-dialog
                title="添加用户"
                :visible.sync="addVisible"
                width="30%"
        >
            <el-form label-width="80px" :model="addForm" >

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="addForm.age"></el-input>
                </el-form-item>
                <el-form-item label="eamil" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button  @click="cancel()">取 消</el-button>
    <el-button type="primary" @click="addConfirm()">确 定</el-button>
  </span>
        </el-dialog>

        <!--修改用户弹框-->
        <el-dialog
                title="修改用户"
                :visible.sync="updVisible"
                width="30%"
        >
            <el-form label-width="80px" :model="updForm" >

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="updForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="updForm.age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="updForm.email"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updVisible = false">取 消</el-button>
    <el-button type="primary" @click="updConfirm()">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        name: "User.vue",
        data(){
            return{
                tableData:[],
                addForm:{},
                updForm:{},
                currentPage:1,
                pageSize:5,
                addVisible:false,
                updVisible:false,
                total:0
            }
        },
        created() {
            this.initTable()
        },
        methods: {
            initTable() {
                this.$http.get("http://localhost:9000/user/all?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.data.code===200){
                    this.tableData = resp.data.data.list
                        console.log(this.tableData)
                    this.total = resp.data.data.total
                    }else if (resp.data.code===4001){
                        this.$router.push("/")
                        this.$message.error("未登录")
                    }
                })
            },
            del(row) {
                this.$http.get("http://localhost:9000/user/delete?id=" + row.id).then(resp => {
                    this.$message.success("删除成功")
                    this.initTable();
                })
            },
            add() {
                this.addVisible = true;

            },
            addConfirm(){
                this.$http.get("http://localhost:9000/user/insert?name="+this.addForm.name+"&age="+this.addForm.age+"&email="+this.addForm.email).then(resp=>{
                    this.$message.success("添加成功")
                })
                this.addVisible = false;
                this.initTable()
                this.addForm={}
            },
            upd(row){
                this.updVisible = true;
                this.updForm = row;
            },
            cancel(){
                this.addVisible = false;
                this.addForm={}
            },
            updConfirm(){
                this.$http.get("http://localhost:9000/user/update?name="+this.updForm.name+"&age="+this.updForm.age+"&email="+this.updForm.email+"&id="+this.updForm.id).then(resp=>{
                    this.$message.success("修改成功")
                })
                this.updVisible = false;
                this.initTable()
                this.updForm={}

            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },

        }
    }
</script>

<style scoped>

</style>
